<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main</title>
  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/jquery-3.6.3.min.js"></script>
</head>
<body id="body-pd">
<div class="container">
  <div class="l-navbar" id="navbar">
    <nav class="nav">
      <div>
        <div class="nav_brand">
          <!-- <ion-icon name="menu-outline" class="nav_toggle" id="nav_toggle"></ion-icon> -->
          <ion-icon name="menu-outline" class="nav_toggle" id="nav-toggle"></ion-icon>

          <a href="#" class="nav_logo" th:text="welcome+' '+ ${account.userid}">Welcome!</a>
        </div>
        <div class="nav_list">

          <a href="#" class="nav_link active" id="homePage">
            <ion-icon name="home-outline" class="nav_icon" ></ion-icon>
            <span class="nav_name">主页</span>
          </a>

          <a href="#" class="nav_link" id="categoryInfo">
            <ion-icon name="chatbubbles-outline" class="nav_icon" ></ion-icon>
            <span class="nav_name">商品信息</span>
          </a>

          <a href="#" class="nav_link" id="orderInfo">
            <ion-icon name="chatbubbles-outline" class="nav_icon" ></ion-icon>
            <span class="nav_name">订单信息</span>
          </a>

          <div class="nav_link collapse">
            <ion-icon name="folder-outline" class="nav_icon" ></ion-icon>
            <span class="nav_name">项目</span>
            <ion-icon name="chevron-down-outline" class="collapse__link" ></ion-icon>
            <ul class="collapse_menu">
              <a href="#" class="collapse__sublink">你好</a>
              <a href="#" class="collapse__sublink">很高兴</a>
              <a href="#" class="collapse__sublink">认识你</a>
            </ul>
          </div>

          <div class="nav_link collapse">
            <ion-icon name="people-outline" class="nav_icon" ></ion-icon>
            <span class="nav_name">团队</span>
            <ion-icon name="chevron-down-outline" class="collapse__link" ></ion-icon>
            <ul class="collapse_menu">
              <a href="#" class="collapse__sublink">1a</a>
              <a href="#" class="collapse__sublink">2b</a>
              <a href="#" class="collapse__sublink">3c</a>
            </ul>
          </div>
          <a href="#" class="nav_link" id="personInfo">
            <ion-icon name="settings-outline" class="nav_icon" ></ion-icon>
            <span class="nav_name">设置</span>
          </a>
        </div>
      </div>
      <a href="/signOut" class="nav_link">
        <ion-icon name="log-out-outline" class="nav_icon" ></ion-icon>
        <span class="nav_name">退出登陆</span>
      </a>
    </nav>
  </div>

  <iframe src="/homePage" id="box" class="main-right"></iframe></div>

<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

<!-- 在实现侧边栏的内部网页嵌入时，使用iframe标签。因为侧边栏已经使用了固定定位，z-index也设置了100，
    现在的问题就是，怎么把两个不在同一层的容器变成相邻的
-->